<template>
  <a-menu
      class="menu"
      v-model:openKeys="state.openKeys"
      v-model:selectedKeys="state.selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="state.collapsed"
      :items="items"
      @select="handleSelect"
  ></a-menu>
</template>

<script setup>
import { DesktopOutlined } from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router'
import { reactive, watch, h, onMounted, onBeforeMount } from 'vue';
const router = useRouter()
const route = useRoute()
const state = reactive({
  collapsed: false,
  selectedKeys: ['/'],
  openKeys: ['/'],
});

const handleSelect = e => {
  // console.log('select', e.key);
  router.push(e.key)
};
function getMenu(routes) {
  let arr = []
  routes.map(item => {
    if (item.meta && item.meta.title && !item.children) {
      let itemRoute = {
        key: item.path,
        label: item.meta.title,
        title: item.meta.title,
        icon: () => h(item.meta.icon ? item.meta.icon : DesktopOutlined)
      }
      arr.push(itemRoute)
    } else if (item.meta && item.meta.title && item.children) {
      let itemRoute = {
        key: item.path,
        label: item.meta.title,
        title: item.meta.title,
        children: getMenu(item.children),
        icon: () => h(item.meta.icon ? item.meta.icon : DesktopOutlined)
      }
      arr.push(itemRoute)
    }
  })
  return arr
}
let routes = router.options.routes
let menuArr = getMenu(routes)
let items = reactive(menuArr)

watch(state.openKeys, val => {
  console.log('openKeys', val);
});

console.log(route.path)
onBeforeMount(() => {
  console.log('onBeforeMount')
  console.log(router.currentRoute)
  console.log(router.currentRoute.value)
})
onMounted(() => {
  console.log('onMounted')
  console.log(route)
  console.log(route.path)
})

</script>

<style scoped>

</style>